import { useEffect, useState } from 'react'
import axios from 'axios'

interface IDog {
  message: string
  status: string
}

interface IResquest<T> {
  data: T
}

function App() {
  const [dogSrc, setDogSrc] = useState('')

  // 注意：useEffect 只能是一个同步函数，不能使用 async
  // 因为 effect 的返回值应该是一个清理函数，React 会在组件卸载或者 effect 依赖项变化时重新执行
  // 如果 effect 是 async 的，此时返回值是 Promise，这样的话，就无法保证清理函数被立即调用
  // 如果延迟调用清理函数，也就没有机会忽略过时的请求或者取消请求
  // 为了使用 async/await 语法，可以在 effect 内部创建 async 函数，并调用
  useEffect(() => {
    async function getGog() {
      const res = await axios.get<IDog, IResquest<IDog>>('https://dog.ceo/api/breeds/image/random')
      setDogSrc(res.data.message)
    }
    getGog()
  }, [])

  return (
    <div>
      <h4>useEffect</h4>
      <img src={dogSrc} alt="狗子" />
    </div>
  )
}

export default App
